<template>
  <div class="login-bg">
    <div class="login-container">
      <!-- 左侧表单 -->
      <div style="flex:1;display: flex">
        <div class="login-form">
          <h2>欢迎登录</h2>
          <div class="subtitle">VANTIDE BAMBOO 薪酬系统</div>
          <div class="form-group">
            <label>手机号码</label>
            <input type="text" placeholder="请输入手机号码" v-model="phone"/>
          </div>
          <div class="form-group">
            <label>验证码</label>
            <div class="code-group">
              <input class="code-input" type="text" placeholder="请输入验证码" v-model="code"/>
              <button class="get-code-btn" @click="getPhoneCode" :disabled="timeDown > 0">
                {{ timeDown > 0 ? `${timeDown}s后重试` : '获取验证码' }}
              </button>
            </div>
          </div>
          <button class="login-btn" @click="onCheckLogin">登陆</button>
          <div class="tip">如无法登陆，请联系管理员</div>
        </div>
      </div>
      <!-- 右侧二维码 -->
      <div class="login-qrcode">
        <div class="qrcode-img">
          <QRCode v-if="qrcode" :value="qrcode"/>
        </div>

        <div class="qrcode-title">二维码登录</div>
        <div class="qrcode-tip">请用企业微信扫上方二维码登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import help from "@/utils/help.js";
import api from "@/api/index.js";
import QRCode from "./component/QRCode.vue";
import {message} from "ant-design-vue";

export default {
  name: "Login",
  components: {
    QRCode
  },
  data() {
    return {
      phone: "",
      code: "",
      qrcode: "",
      state: "",
      timeDown: 0
    };
  },
  async mounted() {
    localStorage.removeItem("token");
    await this.getCode();
    this.interval();
  },
  unmounted() {
    this.stopInterval();
    this.stopCountDown();
  },
  methods: {
    async onCheckLogin() {
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        message.error("请输入正确的手机号!");
        return;
      }
      if (!this.code) {
        message.error("请输入验证码");
        return;
      }
      try {
        let res = await api.verifyMobile({
          mobile: this.phone,
          code: this.code
        });
        this.state = res;
      } catch (error) {
        help.showError(error);
      }
    },
    async getPhoneCode() {
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        message.error("请输入正确的手机号!");
        return;
      }
      try {
        let result = await api.sendSms({
          mobile: this.phone,
        })
        this.timeDown = 60;
        message.success("验证码已发送");
        this.startCountDown();
      } catch (error) {
         help.error(error);
      }
    },

    startCountDown() {
      this.countDownTimer = setInterval(() => {
        if (this.timeDown > 0) {
          this.timeDown--;
        } else {
          this.stopCountDown();
        }
      }, 1000);
    },
    stopCountDown() {
      this.countDownTimer && clearInterval(this.countDownTimer);
      this.countDownTimer = null;
      this.timeDown = 0;
    },
    stopInterval() {
      this.timer && clearInterval(this.timer);
      this.timer = null;
    },
    interval() {
      this.stopInterval();
      this.timer = setInterval(async () => {
        await this.getStateToUser();
      }, 1000)
    },
    async getStateToUser() {
      try {
        if (!this.state) {
          return;
        }
        let result = await api.getStateToUser({
          state: this.state
        });
        localStorage.setItem("token", this.state);
        this.$router.push({path: "/"});
        console.log("result", result);
      } catch (e) {
       // console.error(e);
      }
    },
    async getCode() {
      try {
        let result = await api.getLoginCode();
        this.qrcode = result.qrCode;
        this.state = result.state;
      } catch (e) {
        help.showError(e);
      }
    },
  }
};
</script>

<style scoped lang="scss">
.login-bg {
  width: 100vw;
  height: 100vh;
  background: url('@/assets/img/background.png') no-repeat center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.login-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  width: 900px;
  height: 530px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.05);
  border: 1px white solid;
  box-sizing: border-box;
}

.login-form {
  background: rgba(30, 50, 40, 0.5);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 48px 40px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.login-form h2 {
  font-size: 36px;
  font-weight: 400;
  margin-bottom: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
}

.subtitle {
  text-align: center;
  font-size: 20px;
  letter-spacing: 1px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 1);
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  color: #e0e0e0;
}

.form-group input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  outline: none;
  font-size: 16px;
  background: rgba(255, 255, 255, 0);
  color: #fff;
  margin-bottom: 2px;
  border: 2px rgba(255, 255, 255, 0.6) solid;
}

.code-group {
  display: flex;
  align-items: center;
  border: 2px rgba(255, 255, 255, 0.6) solid;
  border-radius: 6px;
  position: relative;
  overflow: hidden;

  .code-input {
    border: none;
  }
}

.code-group input {
  flex: 1;
  margin-right: 10px;
}

.get-code-btn {
  background: #3a7c5a;
  color: #fff;
  border: none;
  padding: 0 32px;
  height: 44px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
}

.get-code-btn:hover {
  background: #2e5e45;
}

.get-code-btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.get-code-btn:disabled:hover {
  background: #666;
}

.login-btn {
  width: 100%;
  background: #3a7c5a;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 0;
  font-size: 18px;
  font-weight: bold;
  margin: 18px 0 18px 0;
  cursor: pointer;
  transition: background 0.2s;
}

.login-btn:hover {
  background: #2e5e45;
}

.tip {
  text-align: center;
  color: #e0e0e0;
  font-size: 13px;
  margin-top: 10px;
}

.login-qrcode {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 32px;
  border-bottom-right-radius: 32px;
  box-sizing: border-box;
}

.qrcode-img {
  width: 240px;
  height: 240px;
  margin-bottom: 52px;
}

.qrcode-title {
  font-size: 32px;
  font-weight: bold;
  color: #222;
  margin-bottom: 18px;
}

.qrcode-tip {
  color: #666;
  font-size: 18px;
}
</style>